<template>
  <div class="edit_container">
    <quill-editor :style="{height:height}"
                  v-model="value"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
    </quill-editor>
    <el-upload
      class="uploadFile"
      :action="uploadPath"
      :auto-upload="true"
      :limit="50"
      :on-success="uploadSuccess"
      :show-file-list="false"
      name="uploadFormFile"
      :data="uploadData"
    >
    </el-upload>
  </div>
</template>
<script>
  import {quillEditor} from 'vue-quill-editor' //调用编辑器
  import Config from '@/js/config.js'
  import HttpCode from '@/js/HttpCode.js'

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    name: 'QuillEditor',
    components: {
      quillEditor
    },
    data () {
      return {
        uploadData: {
          uploadPath: '/webApp/images'
        },
        uploadPath: Config.uploadURL,
        editorContent: '',
        editorOption: {
          placeholder: '请在这里输入文章内容',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                ['blockquote', 'code-block', 'link'],     //引用，代码块
                [{'header': 1}, {'header': 2}],        // 标题，键值对的形式；1、2表示字体大小
                [{'list': 'ordered'}, {'list': 'bullet'}],     //列表
                [{'script': 'sub'}, {'script': 'super'}],   // 上下标
                [{'indent': '-1'}, {'indent': '+1'}],     // 缩进
                [{'direction': 'rtl'}],             // 文本方向
                [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                [{'header': [1, 2, 3, 4, 5, 6, false]}],     //几级标题
                [{'color': []}, {'background': []}],     // 字体颜色，字体背景颜色
                [{'font': []}],     //字体
                [{'align': []}],    //对齐方式
                ['clean'],    //清除字体样式
                ['image', 'video']    //上传图片、上传视频
              ],
              handlers: {
                'image': (() => {
                  document.querySelector('.uploadFile input').click()
                })
              }
            }
          }
        }
      }
    },
    methods: {
      onEditorReady (editor) { // 准备编辑器
      },
      onEditorBlur () {
      }, // 失去焦点事件
      onEditorFocus () {
      }, // 获得焦点事件
      onEditorChange () {
        console.log(111)
        this.$emit('input', this.value)
      }, // 内容改变事件
      uploadSuccess (msg, file) {
        if (msg.code != HttpCode.OK) {
          this.$notify.error({
            title: '错误',
            message: msg.msg
          })
        } else {
          let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          quill.insertEmbed(length, 'image', Config.baseURL + msg.row)
          quill.setSelection(length + 1)
        }

      }
    },
    created () {
      this.editorContent = this.value
    },
    computed: {
      editor () {
        return this.$refs.myQuillEditor.quill
      },

    },
    watch: {
      value () {
        this.editorContent = this.value
      }
    },
    props: {
      height: {
        type: String,
        default: '600px'
      },
      value: {
        type: String,
        default: ''
      }
    }
  }
</script>
